<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="horizontal" >
          <a-row :gutter="8">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="queryParam.userName" placeholder="精确查询"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input v-model="queryParam.fullName" placeholder="支持模糊查询"/>
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="成功标志" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select v-model="queryParam.loginFlag" placeholder="请选择" allowClear default-value="1">
                    <a-select-option value="0">失败</a-select-option>
                    <a-select-option value="1">成功</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="登入年月" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input-number v-model="queryParam.ym" placeholder="年月格式如：201901" style="width: 100%"/>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="登入开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-date-picker
                      :disabledDate="disabledStartDate"
                      :allowClear="true"
                      showTime
                      style="width: 100%"
                      format="YYYY-MM-DD HH:mm:ss"
                      v-model="queryParam.loginTimeBeg"
                      placeholder="请输入开始时间"
                      @openChange="handleStartOpenChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="登入结束时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-date-picker
                      :disabledDate="disabledEndDate"
                      :allowClear="true"
                      showTime
                      style="width: 100%"
                      format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请输入结束时间"
                      v-model="queryParam.loginTimeEnd"
                      :open="endOpen"
                      @openChange="handleEndOpenChange"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="登入类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select v-model="queryParam.loginType" placeholder="单选" allowClear >
                    <a-select-option v-for="item in dictData.loginType" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="设备类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-select v-model="queryParam.equipmentType" placeholder="单选" allowClear >
                    <a-select-option v-for="item in dictData.equipmentType" :key="item.dictKey" :value="item.dictKey">{{ item.dictValue }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="登入ip" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  <a-input v-model="queryParam.loginIp" placeholder="精确查找"/>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="() =>{this.findListBtn()}">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => {this.clearAll()}">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <vxe-grid
          class="vxe-table-antd"
          resizable
          show-overflow
          ref="listTable"
          stripe
          border
          highlight-hover-row
          highlight-current-row
          highlight-hover-column
          highlight-current-column
          highlight-cell
          height="400"
          size="small"
          :columns="tableColumn"
          row-id="loginId"
          :data="tableData"
          :loading="loading"
          :start-index="(tablePage.currentPage - 1) * tablePage.pageSize"
          :pager-config="tablePage"
          @page-change="handlePageChange"
      >
      </vxe-grid>
    </a-card>
  </div>
</template>

<script>
import { getBatchDict,getloginLogList } from "@/services/system/api"
// import modal from 'ant-design-vue/es/modal'
import moment from 'moment'
const statusMap = {
  0: {
    status: 'error',
    text: '失败'
  },
  1: {
    status: 'success',
    text: '成功'
  }
}
const flagMap = {
  0: {
    status: 'default',
    text: '下线'
  },
  1: {
    status: 'processing',
    text: '在线'
  }
}
export default {
  name: 'UserLoginLog',
  components: {
  },
  data () {
    return {
      description: '用户登入日志',
      dictData: {},
      endOpen: false,
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 }
      },
      form: null,
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      loading: false,
      tablePage: {
        total: 0,
        currentPage: 1,
        pageNum: 1,
        pageSize: 20
      },
      tableColumn: [
        { type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号' },
        { field: 'loginId', title: '登入Id', visible: false, fixed: 'left', align: 'center', width: 150 },
        { field: 'userId', title: '用户Id', visible: false, align: 'center', fixed: 'left', width: 150 },
        { field: 'userName', title: '用户名', align: 'center', fixed: 'left', width: 150 },
        { field: 'fullName', title: '姓名', align: 'center', fixed: 'left', width: 200 },
        { field: 'ym', title: '所属年月', align: 'center', width: 80 },
        { field: 'onlineFlag', title: '在线标识', align: 'center', width: 80, slots: { default: ({ row }) => { return [this.formatflag(row.onlineFlag)] } } },
        { field: 'loginFlag', title: '登入成功标识', align: 'center', width: 80, slots: { default: ({ row }) => { return [this.formatStatus(row.loginFlag)] } } },
        { field: 'failReason', title: '失败原因', align: 'center', width: 300 },
        { field: 'accessToken', title: '登入TOKEN', align: 'center', width: 250 },
        { field: 'loginTime', title: '登入时间', align: 'center', width: 200 },
        { field: 'logoutTime', title: '退出时间', align: 'center', width: 200 },
        { field: 'loginIp', title: '登入IP', align: 'center', width: 150 },
        { field: 'loginHost', title: '登入host', align: 'center', width: 150 },
        { field: 'loginKey', title: '登入KEY', align: 'center', width: 250 },
        { field: 'loginType', title: '登入类型', visible: false, align: 'center', width: 100 },
        { field: 'loginTypeName', title: '登入类型', align: 'center', width: 250 },
        { field: 'equipmentType', title: '登入设备类型', visible: false, align: 'center', width: 100 },
        { field: 'equipmentTypeName', title: '登入设备类型', align: 'center', width: 250 },
        { field: 'openId', title: '第三方登入ID', align: 'center', width: 200 },
        { field: 'equipmentId', title: '登入设备ID', align: 'center', width: 200 },
        { field: 'browser', title: '浏览器类型', align: 'center', width: 150 }
      ],
      tableData: [],
      selectData: {}
    }
  },
  created () {
    // 数据初始化
    // 数据字典初始化
    const params = {}
    params.dictFields = 'equipmentType,loginType'
    this.$http.post(getBatchDict,params).then(res => {
      this.dictData = res.result
    })
  },
  methods: {
    moment,
    formatStatus (cellValue) {
      if (cellValue) {
        const text = statusMap[cellValue].text
        const status = statusMap[cellValue].status
        if (text) {
          return <a-badge status={status} text={text}/>
        } else {
          return cellValue
        }
      }
    },
    formatflag (cellValue) {
      if (cellValue) {
        const text = flagMap[cellValue].text
        const status = flagMap[cellValue].status
        if (text) {
          return <a-badge status={status} text={text}/>
        } else {
          return cellValue
        }
      }
    },
    disabledStartDate (loginTimeBeg) {
      const loginTimeEnd = this.queryParam.loginTimeEnd
      if (!loginTimeBeg || !loginTimeEnd) {
        return false
      }
      return loginTimeBeg.valueOf() > loginTimeEnd.valueOf()
    },
    disabledEndDate (loginTimeEnd) {
      const loginTimeBeg = this.queryParam.loginTimeBeg
      if (!loginTimeEnd || !loginTimeBeg) {
        return false
      }
      return loginTimeBeg.valueOf() >= loginTimeEnd.valueOf()
    },
    handleStartOpenChange (open) {
      if (!open) {
        this.endOpen = true
      }
    },
    handleEndOpenChange (open) {
      this.endOpen = open
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    handlePageChange ({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageNum = currentPage
      this.tablePage.pageSize = pageSize
      this.findList()
    },
    findListBtn () {
      this.tablePage.currentPage = 1
      this.tablePage.pageNum = 1
      this.findList()
    },
    // 列表查询
    findList () {
      this.loading = true
      const params = Object.assign(this.queryParam, this.tablePage)
      if(this.queryParam.loginTimeBeg){
        params.loginTimeBeg =moment(this.queryParam.loginTimeBeg).format('YYYY-MM-DD HH:mm:ss')
      }
      if(this.queryParam.loginTimeEnd){
        params.loginTimeEnd =moment(this.queryParam.loginTimeEnd).format('YYYY-MM-DD HH:mm:ss')
      }
      setTimeout(() => {
        this.$http.post(getloginLogList,params).then((res) => {
          const data = res.result.list
          this.tableData = data
          this.tablePage.total = res.result.total
          this.tablePage.currentPage = res.result.pageNum
          this.tablePage.pageNum = res.result.pageNum
          this.tablePage.pageSize = res.result.pageSize
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      }, 20)
    },
    clearAll () {
      this.queryParam = {}
      this.findList()
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>
